<template>
  <PageCont :title="title">
    <xgPlayer :url="formatUrl" :key="activeId"></xgPlayer>

    <div class="an-box-info">
      <div class="an-title">{{ videoInfo.name }}</div>
      <van-row justify="space-between">
        <van-col span="12">
          <div class="an-sbtext">{{ videoInfo.tags }}</div>
        </van-col>
        <van-col span="12">
          <div class="an-sbtext an-right">{{ videoInfo.createTime }}</div>
        </van-col>
      </van-row>

      <div class="van-hairline--top-bottom an-btn-group">
        <van-button
          class="an-btn"
          v-for="item in videoInfo.urls"
          :key="item.id"
          :type="activeId==item.id?'primary':'default'"
          size="small"
          @click="activeUrl(item)"
        >{{item.name}}</van-button>
      </div>

      <AnImage :url="videoInfo.coverImage" />

      <div v-html="videoInfo.description"></div>
    </div>
  </PageCont>
</template>

<script lang="ts" setup>
import PageCont from "@/components/Page/PageCont.vue";
import xgPlayer from "@/components/Player/xgPlayer.vue";
import AnImage from "@/components/AnImage/index.vue";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { getVideoInfo } from "@/api/data";

const route = useRoute();
const router = useRouter();
//接收参数
const title = route.query.title || "详情";

// 接收参数ID
const id = route.query.id || "";

const loading = ref(false);
const videoInfo = reactive({
  name: "",
  description: "",
  coverImage: "",
  createTime: "",
  updateTime: "",
  videoLength: "",
  webId: "",
  status: "",
  tags: "",
  urls: [],
});

const activeId = ref(route.query.activeId);
const formatUrl = ref("");

// 点击选中
const activeUrl = (item) => {
  activeId.value = item.id;
  formatUrl.value = item.videoUrl;
  router.replace({
    path: "/videoInfo",
    query: {
      id: id,
      title: title,
      activeId: item.id,
    },
  });
};

// 查询详情
const getVideoInfoData = async () => {
  loading.value = true;
  const res = await getVideoInfo(id);
  videoInfo.name = res.name;
  videoInfo.description = res.description;
  videoInfo.coverImage = res.coverImage;
  videoInfo.createTime = res.createTime;
  videoInfo.updateTime = res.updateTime;
  videoInfo.videoLength = res.videoLength;
  videoInfo.webId = res.webId;
  videoInfo.status = res.status;
  videoInfo.tags = res.tags;
  videoInfo.urls = res.urls;
  loading.value = false;

  changeVideo();
};

// 当前选中的视频
const changeVideo = () => {
  const activeUrlData = videoInfo.urls.find((item) => {
    return item.id == activeId.value;
  });
  if (activeUrlData) {
    activeUrl(activeUrlData);
  } else {
    activeUrl(videoInfo.urls[0]);
  }
};

getVideoInfoData();

// 路由后退
const goBlack = () => {
  router.go(-1);
};
</script>

<style lang="less" scoped>
.an-box-info {
  padding: 15px;
}
.an-title {
  padding-bottom: 10px;
}
.an-sbtext {
  padding: 5px 0;
  font-size: 12px;
  color: #999;
}
.an-right {
  text-align: right;
}
.an-btn-group {
  padding: 10px 0;
  margin-bottom: 10px;
  .an-btn {
    margin: 3px;
  }
}
</style>